<template>
  <i :class="classes" :style="styles">{{ layuiIcon }}</i>
</template>
<script>
const prefixCls = 'fa'
export default {
  name: 'Icon',
  props: {
    name: String,
    type: String,
    size: [Number, String],
    color: String
  },
  data () {
    let icon = this.type === 'layui' ? this.name : ''
    return {
      layuiIcon: icon
    }
  },
  computed: {
    classes () {
      return this.type !== 'layui' ? `${prefixCls} ${prefixCls}-${this.name}` : 'layui-icon'
    },
    styles () {
      let style = {}
      if (this.size) {
        style['font-size'] = `${this.size}px`
      }
      if (this.color) {
        style.color = this.color
      }
      return style
    }
  }
}
</script>
